<%--
*@Description 
*@Author KingTeng
*@Date 2022/2/28
*@Time 8:37
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="header.jsp"%>
<%@include file="top.jsp"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
<br>
<div id="main" class="list-main" align="center">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="areaone" style="width: 600px;height:400px;"></div>
    <div id="areatwo" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var goodsNamedata = [];
        var salesMountdata = [];
        var url = "getOrderAll";
        <!--使用ajax动态获取数据，将获取的数据放到数组中-->
        $.ajax({
            async: false,
            type: "GET",
            url: url,
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function(result){
                for (var i = 0; i < result.length; i++) {
                    goodsNamedata.push(result[i].address);
                    salesMountdata.push(result[i].uid);
                }
            }
        });
        // 基于准备好的dom，初始化echarts实例
        var myChartone = echarts.init(document.getElementById('areaone'));
        var myChartone = echarts.init(document.getElementById('areaone'));
        // 指定图表的配置项和数据
        var optionone = {
            title: {
                text: '各检测点订单数'
            },
            tooltip: {},
            legend: {
                data: ['订单数量']
            },
            xAxis: {
                data: goodsNamedata
            },
            yAxis: {},
            series: [{
                name: '订单数量',
                type: 'bar',
                data: salesMountdata
            }]
        };
        // 基于准备好的dom，初始化echarts实例
        var myChartwo = echarts.init(document.getElementById('areatwo'));
        optiontwo = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: goodsNamedata
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: salesMountdata,
                type: 'line',
                areaStyle: {}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartone.setOption(optionone);
        myChartwo.setOption(optiontwo);
    </script>
</div>
</body>
</html>
